<template>
	<div class="header">
		<slot name="header_left">
		  <div class="back" @click="goBack" v-if="isBack">
		  	<!-- <image class="back_img" src="../../static/img/back.png"></image> -->
		  </div>
		</slot>
		<div class="header_box"></div>
		<div class="header_main" @click="goSetting">
			<div class="name">{{ name }}</div>
			<image class="avatar" :src="avatar"></image>
		</div>
	</div>
</template>

<script setup>
import { computed, watchEffect, ref } from 'vue';

const props = defineProps({
	isBack: {    //  是否显示header
		type: Boolean,
		default: false
	},
});

const userInfo = computed(() => loginStore().userInfo);
const name = ref();
const avatar = ref();

const goBack = () => {
	uni.navigateBack({
		delta: 1
	});
}

const goSetting = () => {
	uni.navigateTo({
		url: '/pages/personal/personal'
	})
}

watchEffect(() => {
	if (userInfo.value) {
		name.value = userInfo.value.nickname;
		avatar.value = userInfo.value.avatar;
	}
})
</script>

<style scoped lang="scss">
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16upx;

	.back {
		display: inline-flex;
		align-items: center;
		width: 120upx;
		height: 120upx;
		margin: 40upx 20upx 0 120upx;
		flex-direction: column;
		cursor: pointer;
		background: url('../../static/img/back.png') center no-repeat;
		background-size: contain;
		
		&:hover {
			background: url('../../static/img/back_hover.svg') center no-repeat;
			background-size: contain;
		}
	}
	
	.back_img {
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	
	.header_box {
		flex: 1;
	}
	
	.header_main {
		position: relative;
		display: flex;
		align-items: center;
		padding: 40upx 40upx 30upx 250upx;
		cursor: pointer;
		
		&::after {
			position: absolute;
			right: 0;
			bottom: 0;
			content: '';
			width: 100%;
			height: 6upx;
			background: linear-gradient(-90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
		}
	}
	
	.name {
		color: #FFF;
		font-size: 32upx;
		font-weight: 700;
	}
	
	.avatar {
		position: relative;
		width: 80upx;
		height: 80upx;
		margin-left: 40upx;
		border-radius: 100%;
		border: 4upx solid #fff;
	}
}

@media (max-width: 1024px) {
.header {
	
	.back {
		width: 80upx;
		height: 80upx;
		margin: 10upx 0 0 32upx;
	}
	
	.header_main {
		padding: 20upx 20upx 20upx 100upx;
		
		&::after {
			height: 4upx;
		}
	}
	.name {
		font-size: 24upx;
	}
	
	.avatar {
		width: 48upx;
		height: 48upx;
		padding: 4upx;
		margin-left: 20upx;
	}
}
}
</style>